<!DOCTYPE html>
<html>
  <head>
    <!-- [[! Document Settings ]] -->
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <!-- [[! Page Meta ]] -->
    <title>Mac 开发环境配置</title>
    <meta name="description" content="在编码 - " />

    <meta name="HandheldFriendly" content="True" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link rel="shortcut icon" href="/assets/images/favicon.ico" >

    <!-- [[! Styles'n'Scripts ]] -->
    <link rel="stylesheet" type="text/css" href="/assets/css/screen.css" />
    <link rel="stylesheet" type="text/css"
      href="//fonts.googleapis.com/css?family=Merriweather:300,700,700italic,300italic|Open+Sans:700,400" />

    <link rel="stylesheet" type="text/css" href="/assets/css/prism.css" />

    <!-- [[! Ghost outputs important style and meta data with this tag ]] -->
    <link rel="canonical" href="/" />
<meta name="referrer" content="origin" />
<link rel="next" href="/page2/" />

<meta property="og:site_name" content="在编码" />
<meta property="og:type" content="website" />
<meta property="og:title" content="在编码" />
<meta property="og:description" content="" />
<meta property="og:url" content="/" />
<meta property="og:image" content="/assets/images/cover1.jpg" />

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="在编码" />
<meta name="twitter:description" content="" />
<meta name="twitter:url" content="/" />
<meta name="twitter:image:src" content="/assets/images/cover1.jpg" />

<script type="application/ld+json">
  {
  "@context": "http://schema.org",
  "@type": "Website",
  "publisher": "Finding The Way Home",
  "url": "/",
  "image": "/assets/images/cover1.jpg",
  "description": ""
  }
</script>

<meta name="generator" content="Jekyll 3.0.0" />
<link rel="alternate" type="application/rss+xml" title="在编码" href="/feed.xml" />


  </head>
  <body class="home-template nav-closed">

    <div class="nav">
  <h3 class="nav-title">Home</h3>
  <a href="#" class="nav-close">
    <span class="hidden">Close</span>
  </a>
  <ul>
    <li class="nav-home " role="presentation"><a href="/">Home</a></li>
    <!-- <li class="nav-about " role="presentation"><a href="/about">About</a></li>
    <li class="nav-author " role="presentation"><a href="/author/casper">Author</a></li> -->
    <li class="nav-ios " role="presentation"><a href="/tag/iOS">iOS</a></li>
    <li class="nav-mvc " role="presentation"><a href="/tag/Android">Android</a></li>
    <li class="nav-server " role="presentation"><a href="/tag/Server">Server</a></li>
  </ul>
  <a class="subscribe-button icon-feed" href="/feed.xml">Subscribe</a>
</div>
<span class="nav-cover"></span>


    <div class="site-wrapper">

      <!-- [[! Everything else gets inserted here ]] -->
      <!-- < default -->

<!-- The comment above "< default" means - insert everything in this file into -->
<!-- the [body] of the default.hbs template, which contains our header/footer. -->

<!-- Everything inside the #post tags pulls data from the post -->
<!-- #post -->

<header class="main-header post-head no-cover">
  <nav class="main-nav overlay clearfix">
      <a class="back-button icon-arrow-left" href='/'>Home</a>
    <a class="menu-button icon-menu" href="#"><span class="word">Menu</span></a>
  </nav>
</header>

<main class="content" role="main">

  <article class="post">

    <header class="post-header">
      <h1 class="post-title">Mac 开发环境配置</h1>
      <section class="post-meta">
        <a href='/'>Listen</a>
        <time class="post-date" datetime="2017-03-18">18 Mar 2017</time>
        <!-- [[tags prefix=" on "]] -->
        
        on
        
        
        <a href='/tag/develop'>develop</a>
        
        
        
      </section>
    </header>

    <section class="post-content">

      <p>因为某些原因，比如入手了新的电脑，或者是重装系统，我们需要配置开发环境。本文讲述 Mac OS 下的开发环境配置。</p>

<blockquote>
<p>Update: 2020/02/19 更新到 macOS Catalina</p>
</blockquote>

<h2>Xcode</h2>

<p>就算你不从事 iOS 开发，也请确保你已经安装了 Xcode，并至少打开过一次。因为很多工具的安装需要依赖 Xcode。</p>

<p><img src="../images/config/xcode.png" alt="Xcode"></p>

<p>直接通过 AppStore 安装即可。</p>

<p>第一次打开 Xcode 时，需要同意 Agreement。</p>

<p><img src="../images/config/xcode_agreement.png" alt="xcode_agreement"></p>

<h2>Homebrew</h2>

<p><a href="https://brew.sh/index_zh-cn.html">Homebrew</a> 是 Mac OSX 上的软件包管理工具，能在 Mac 中方便的安装软件或者卸载软件，相当于 linux 下的 apt-get、yum 神器；Homebre 可以在 Mac 上安装一些 OS X 没有的 UNIX 工具，Homebrew 将这些工具统统安装到了 /usr/local/Cellar 目录中，并在 /usr/local/bin 中创建符号链接。</p>

<p>可以通过以下命令来安装 Homebrew：</p>
<figure class="highlight"><pre><code class="language-text" data-lang="text">$ /usr/bin/ruby -e &quot;$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)&quot;
</code></pre></figure>
<blockquote>
<p>需要先安装好 Xcode</p>
</blockquote>

<h2>Jekyll</h2>

<p><a href="http://jekyllcn.com/">Jekyll</a> 是静态博客生成器</p>
<figure class="highlight"><pre><code class="language-text" data-lang="text">sudo gem install jekyll bundler
</code></pre></figure>
<h2>Cocoapods</h2>

<p><a href="https://guides.cocoapods.org/">Cocoapods</a> 是 iOS 开发包依赖管理工具。</p>
<figure class="highlight"><pre><code class="language-text" data-lang="text">$ sudo gem install cocoapods
</code></pre></figure>
<p>在控制台输入：</p>
<figure class="highlight"><pre><code class="language-text" data-lang="text">xcrun -k --sdk iphoneos --show-sdk-path
</code></pre></figure>
<p>如果输出是：</p>
<figure class="highlight"><pre><code class="language-text" data-lang="text">xcrun:_ error: SDK &quot;iphoneos&quot; cannot be located
xcrun: error: SDK &quot;iphoneos&quot; cannot be located
xcrun: error: unable to lookup item &#39;Path&#39; in SDK &#39;iphoneos&#39;
</code></pre></figure>
<p>那么：</p>
<figure class="highlight"><pre><code class="language-text" data-lang="text">sudo xcode-select --switch /Applications/Xcode.app
</code></pre></figure>
<h2>Fastlane</h2>

<p><a href="https://docs.fastlane.tools/">Fastlane</a> 是 iOS 开发中用到的一个非常有用的工具，它可以帮你自动完成打包，签名，上传 app store 等一系列工作。</p>
<figure class="highlight"><pre><code class="language-text" data-lang="text">sudo gem install fastlane -NV
</code></pre></figure>
<h2>Node</h2>

<p>如果从事前端、小程序、ReactNative 开发，那么需要安装 <a href="https://nodejs.org/en/">Node</a>。</p>

<blockquote>
<p>不要使用 Homebrew 来安装 Node。</p>
</blockquote>

<p>正如 rvm 是 Ruby 的版本管理器，<a href="https://github.com/creationix/nvm">nvm</a> 是 Node 的版本管理器。</p>

<blockquote>
<p>不要使用 Homebrew 来安装 nvm</p>
</blockquote>

<p>点击 <a href="https://github.com/creationix/nvm">nvm</a>，根据官方提示来安装</p>
<figure class="highlight"><pre><code class="language-text" data-lang="text">curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.34.0/install.sh | bash
</code></pre></figure>
<blockquote>
<p>先安装好 Xcode，因为需要。</p>
</blockquote>

<p>nvm 安装完成后，安装 Node</p>
<figure class="highlight"><pre><code class="language-text" data-lang="text">nvm install --lts
</code></pre></figure>
<p>安装 yarn</p>
<figure class="highlight"><pre><code class="language-sh" data-lang="sh">curl -o- -L https://yarnpkg.com/install.sh | bash
</code></pre></figure>
<h2>VS Code</h2>

<p><a href="https://code.visualstudio.com/">Download for Mac</a></p>

<p>安装完成后打开</p>

<p>同时按下 ⇧ + ⌘ + p，安装 code command shell</p>

<p>安装主题 Ayu</p>

<p>安装主题 Material Icon Theme</p>

<p>安装插件 ESLint</p>

<p>安装插件 Prettier - Code formatter</p>

<p>安装插件 GitLens</p>

<p>安装插件 minapp - 小程序</p>

<p>同时按下 ⌘ + , 设置 User Settings</p>
<figure class="highlight"><pre><code class="language-json" data-lang="json">{
  &quot;workbench.colorTheme&quot;: &quot;Ayu Mirage&quot;,
  &quot;workbench.iconTheme&quot;: &quot;material-icon-theme&quot;,

  &quot;javascript.updateImportsOnFileMove.enabled&quot;: &quot;always&quot;,
  &quot;typescript.updateImportsOnFileMove.enabled&quot;: &quot;always&quot;,
  &quot;[javascript]&quot;: {
    &quot;editor.defaultFormatter&quot;: &quot;esbenp.prettier-vscode&quot;,
    &quot;editor.formatOnSave&quot;: false
  },
  &quot;[javascriptreact]&quot;: {
    &quot;editor.defaultFormatter&quot;: &quot;esbenp.prettier-vscode&quot;,
    &quot;editor.formatOnSave&quot;: false
  },
  &quot;[typescript]&quot;: {
    &quot;editor.defaultFormatter&quot;: &quot;esbenp.prettier-vscode&quot;,
    &quot;editor.formatOnSave&quot;: false
  },
  &quot;[typescriptreact]&quot;: {
    &quot;editor.defaultFormatter&quot;: &quot;esbenp.prettier-vscode&quot;,
    &quot;editor.formatOnSave&quot;: false
  },
  &quot;editor.fontSize&quot;: 14,
  &quot;editor.formatOnSave&quot;: true,
  &quot;eslint.autoFixOnSave&quot;: true,
  &quot;eslint.validate&quot;: [
    &quot;javascript&quot;,
    &quot;javascriptreact&quot;,
    {
      &quot;language&quot;: &quot;typescript&quot;,
      &quot;autoFix&quot;: true
    },
    {
      &quot;language&quot;: &quot;typescriptreact&quot;,
      &quot;autoFix&quot;: true
    }
  ]
}
</code></pre></figure>
<h2>Android 开发工具</h2>

<p>确保你已安装了 Homebrew</p>

<p>安装 java</p>
<figure class="highlight"><pre><code class="language-text" data-lang="text">$ brew cask install java
</code></pre></figure>
<p>安装 Android Studio</p>
<figure class="highlight"><pre><code class="language-text" data-lang="text">$ brew cask install android-studio
</code></pre></figure>
<p>设置 Android Studio 相关环境变量</p>
<figure class="highlight"><pre><code class="language-text" data-lang="text">$ touch .zshrc
</code></pre></figure>
<p>打开配置文件</p>
<figure class="highlight"><pre><code class="language-text" data-lang="text">$ open -e .zshrc
</code></pre></figure>
<p>拷贝如下设置到文件中，注意将<code>listen</code>更换成你的用户名</p>
<figure class="highlight"><pre><code class="language-text" data-lang="text">export ANDROID_HOME=/Users/listen/Library/Android/sdk
export PATH=&quot;${ANDROID_HOME}/tools:${PATH}&quot;
export PATH=&quot;${ANDROID_HOME}/platform-tools:${PATH}&quot;
</code></pre></figure>
<p>按下<code>⌘+S</code>保存设置，同时输入如下命令激活设置：</p>
<figure class="highlight"><pre><code class="language-text" data-lang="text">$ source .zshrc
</code></pre></figure>
<h2>Google Chrome</h2>

<p>使用 Homebrew 安装 Google Chrome</p>
<figure class="highlight"><pre><code class="language-text" data-lang="text">brew cask install google-chrome
</code></pre></figure>
<h2>GitLab Runner</h2>

<p><a href="https://docs.gitlab.com/runner/">GitLab Runner</a></p>

<p><a href="https://docs.gitlab.com/runner/install/osx.html">安装 GitLab Runner</a></p>
<figure class="highlight"><pre><code class="language-text" data-lang="text">sudo curl --output /usr/local/bin/gitlab-runner https://gitlab-runner-downloads.s3.amazonaws.com/latest/binaries/gitlab-runner-darwin-amd64
</code></pre></figure>
<p>赋予执行权限</p>
<figure class="highlight"><pre><code class="language-text" data-lang="text">sudo chmod +x /usr/local/bin/gitlab-runner
</code></pre></figure>
<p>注册 runner</p>
<figure class="highlight"><pre><code class="language-text" data-lang="text">gitlab-runner register
</code></pre></figure>
<p>安装和运行</p>
<figure class="highlight"><pre><code class="language-text" data-lang="text"> cd ~
 gitlab-runner install
 gitlab-runner start
</code></pre></figure>
<p>修改配置</p>
<figure class="highlight"><pre><code class="language-text" data-lang="text">open -e ~/.gitlab-runner/config.toml
</code></pre></figure>
<p>gitlab-runner 使用的 shell 是 bash，如果你的系统默认 shell 是 zsh，需要在 ～/.bash_profile 中加入 <code>source ~/.zshrc</code></p>


    </section>

    <footer class="post-footer">

      <!-- Everything inside the #author tags pulls data from the author -->
      <!-- #author-->

      
      <figure class="author-image">
        <a class="img" href='/' style="background-image: url(/assets/images/me.jpg)"><span class="hidden">'s Picture</span></a>
      </figure>
      

      <section class="author">
        <h4><a href='/'>Listen</a></h4>

        
        <p> 移动开发工程师，熟悉 Android、iOS、ReactNative</p>
        
        <div class="author-meta">
          <span class="author-location icon-location"> 深圳</span>
          <span class="author-link icon-link"><a href="https://github.com/listenzz"> Github</a></span>
        </div>
      </section>

      <!-- /author  -->

      <section class="share">
        <h4>Share this post</h4>
        <a class="icon-twitter" href="http://twitter.com/share?text=Mac 开发环境配置&amp;url=https://github.com/listenzzconfigue-mac-for-develop.html"
          onclick="window.open(this.href, 'twitter-share', 'width=550,height=235');return false;">
          <span class="hidden">Twitter</span>
        </a>
        <a class="icon-facebook" href="https://www.facebook.com/sharer/sharer.php?u=https://github.com/listenzzconfigue-mac-for-develop.html"
          onclick="window.open(this.href, 'facebook-share','width=580,height=296');return false;">
          <span class="hidden">Facebook</span>
        </a>
        <a class="icon-google-plus" href="https://plus.google.com/share?url=https://github.com/listenzzconfigue-mac-for-develop.html"
          onclick="window.open(this.href, 'google-plus-share', 'width=490,height=530');return false;">
          <span class="hidden">Google+</span>
        </a>
      </section>

      <!-- Add Disqus Comments -->
      <!-- <section class="disqus">
    <div id="disqus_thread"></div>
    <script type="text/javascript">
        var disqus_shortname  = 'listenzz';
        var disqus_identifier = 'Mac 开发环境配置';
        var disqus_title      = "Mac 开发环境配置";
        
        (function() {
         var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
         dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
         (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
         })();
        </script>
    <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
    <a href="http://disqus.com" class="dsq-brlink">blog comments powered by <span class="logo-disqus">Disqus</span></a>
</section>
 -->

    </footer>

  </article>

</main>

<aside class="read-next">

  <!-- [[! next_post ]] -->
  
  <a class="read-next-story no-cover" href="/android-architecture-part-1-every-new-beginning-is-hard.html">
    <section class="post">
      <h2>[译] Android 架构：Part 1 —— 那些年我们犯过的错</h2>
      <p>本系列文章旨在概述我们搭建 Android 应用程序架构时可能会碰到的问题。我意识到，无论实现 Android app 架构的过程多么困难，结果证明这些一定是完成每一个卓越的应用的基础。 每种技术都有其**自然的进化**。或者更确切地说，它的社区经历了进化的过程。一个新的计算机语言或框架的早期采用者是爱好者，他们只是希望掌握技术，并尽快完成一些工作。通常，新社区规模小，在开发人员之间的知识传递潜力有限，也就是说，每个人都从自己的错误中学习，因为没有架构指南可用。 ![](../images/android/Illustration_1.png) ## 早期 Android 们的痛点：谷歌是否关心？ 你可以说，有很多资深的家伙在不同的技术上有很多的经验，但谁也没有时间提出标准。嗯，不一定。如果技术背后有一个强大的公司指望赚钱，他们的布道师会告诉你这个新语言多么酷，可以做很多事情，容易学习，可扩展，并且可以满足数以百万计的用户。 微软就经常用它的技术干这样的事情。另一方面，当谷歌收购了 Android，...</p>
    </section>
  </a>
  
  <!-- [[! /next_post ]] -->
  <!-- [[! prev_post ]] -->
  
  <!-- [[! /prev_post ]] -->
</aside>

<!-- /post -->


      <footer class="site-footer clearfix">
        <section class="copyright"><a href="/">在编码</a> &copy; 2020</section>
        <section class="poweredby">Proudly published with <a href="https://jekyllrb.com/">Jekyll</a> using <a href="https://github.com/biomadeira/jasper">Jasper</a></section>
      </footer>
    </div>
    <!-- [[! Ghost outputs important scripts and data with this tag ]] -->
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <!-- [[! The main JavaScript file for Casper ]] -->
    <script type="text/javascript" src="/assets/js/jquery.fitvids.js"></script>
    <script type="text/javascript" src="/assets/js/index.js"></script>
    <script type="text/javascript" src="/assets/js/prism.js"></script>

    <!-- Add Google Analytics  -->
    <!-- Google Analytics Tracking code -->
<script>
 (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
   (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
   m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
 })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

 ga('create', 'UA-96120107-1', 'auto');
 ga('send', 'pageview');

</script>

  </body>
</html>
